<template>
	<view class="collect-container">
		<CommonBack title="我的订单" @back="back"></CommonBack>
		<!-- 头部搜索区域 -->
		<view class="collect-hd">
			<u--input v-model="searchValue" shape="circle"></u--input>
			<view class="search-btn">
				<image src="../../static/imgs/search.png" mode=""></image>
			</view>
		</view>
		<!-- 内容区域 -->
		<view class="collect-warp">
			<view class="warp-item" v-for="item in course" :key="item.id">
				<view class="item-left">
					<image src="../../static/imgs/hot-recommend-1.png" mode=""></image>
					<view class="item-info">
						<view class="info-title">
							{{item.title}}
						</view>
						<view class="info-course">
							<text>授课：{{item.author}}</text>
							<image src="../../static/imgs/add.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="item-right">
					<view class="bm">
						报名成功
					</view>
					<view class="right-btn">
						<image src="../../static/imgs/collect.png" mode=""></image>
						<image src="../../static/imgs/share.png" mode=""
							style="margin-left: 20rpx; width: 27rpx;height: 30rpx;"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入返回组件
	import CommonBack from "../../components/CommonBack.vue"
	import {courseBuy} from "@/api/course.js"
	export default {
		components: {
			CommonBack
		},
		data() {
			return {
				searchValue: '',
				course:[]
			};
		},
		methods: {
			back() {
				uni.switchTab({
					url: "./my"
				})
			},
			getCourseBuy(){
				courseBuy().then(res=>{
					this.course=res.data
				})
			}
		},
		created() {
			this.getCourseBuy()
		}
	}
</script>

<style lang="scss" scoped>
	.collect-container {
		padding: 100rpx 60rpx;

		.collect-hd {
			margin: 60rpx 0rpx;
			display: flex;
			align-items: center;

			.search-btn {
				width: 60rpx;
				height: 60rpx;
				margin-left: 40rpx;
				background-color: #3F7BED;
				border-radius: 50%;
				line-height: 60rpx;
				text-align: center;

				image {
					width: 27rpx;
					height: 27rpx;
				}
			}
		}

		.collect-warp {
			.warp-item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 20rpx;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				background: #F4F6F8;
				border: 2rpx solid #FFFFFF;
				box-shadow: 10rpx 10rpx 20rpx 2rpx rgba(151, 173, 225, 0.6);
				margin-bottom: 40rpx;

				.item-left {
					display: flex;
					align-items: center;

					image {
						width: 160rpx;
						height: 160rpx;
					}

					.item-info {
						.info-title {
							margin-bottom: 20rpx;
							color: #3D5464;
							font-weight: bold;
							font-size: 28rpx;
						}

						.info-course {
							display: flex;
							align-items: center;
							color: #999FAD;
							font-size: 20rpx;

							image {
								width: 24rpx;
								height: 24rpx;
								margin-left: 20rpx;
							}
						}
					}
				}

				.item-right {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: flex-end;
					.bm {
						width: 160rpx;
						font-size: 20rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						color: #FFFFFF;
						border: 1px solid #FFFFFF;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						box-shadow: 10rpx 10rpx 20rpx 2rpx rgba(151, 173, 225, 0.8);
						background: #3F7BED;
					}

					.right-btn {
						display: flex;
						align-items: center;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

				}
			}
		}
	}
</style>
